<template>
    <div>
        <modal v-model="value" width="932" :closable="false" :mask-closable='false'>
            <div slot="header" style="font-size: 24px;font-weight: bolder;">
                {{applyNo+'还款计划'}}
            </div>
            <Table :columns="columns" :data="dataList" border height="400"
                   width="900" closeable="false " :loading="loading"/>
            <div slot="footer">
                <Button type="text" @click="cancel">关闭</Button>
            </div>
            <div v-show="queryFlag"></div>
        </modal>
    </div>
</template>

<script>
    import {listRepayPlans} from "../../../../api/afs-case/post-loan/repayPlans";

    export default {
        name: "repay-plans",
        props: {
            value: {
                type: Boolean,
                default: false
            },
            applyNo: {
                type: [Number, String],
                default: ''
            }
        },
        data(){
            return{
                loading:false,
                columns:[
                    {
                        title: "合同编号",
                        key: "contractNo",
                        minWidth: 180,
                    },
                    {
                        title: "期数",
                        key: "termNo",
                        minWidth: 80,
                    },
                    {
                        title: "剩余本金",
                        key: "remainPrinciple",
                        type: 'currency',
                        minWidth: 120,
                    },
                    {
                        title: "应收租金",
                        key: "receivableRent",
                        type: 'currency',
                        minWidth: 120,
                    },
                    {
                        title: "应收本金",
                        key: "receivablePrinciple",
                        type: 'currency',
                        minWidth: 120,
                    },
                    {
                        title: "应收利息",
                        key: "receivableInterest",
                        type: 'currency',
                        minWidth: 120,
                    },
                    {
                        title: "状态",
                        key: "statusDesc",
                        align: "center",
                        minWidth: 120
                    },
                    {
                        title: "应还款日期",
                        key: "dueDate",
                        type: 'date',
                        minWidth: 150,
                    },
                    {
                        title: "实际收款日期",
                        key: "actualPaymentDate",
                        type: 'date',
                        minWidth: 150,
                    },
                    {
                        title: "实收租金",
                        key: "actualRent",
                        type: 'currency',
                        minWidth: 100,
                    },
                    {
                        title: "实收本金",
                        key: "actualPrinciple",
                        type: 'currency',
                        minWidth: 100,
                    },
                    {
                        title: "实收利息",
                        key: "actualInterest",
                        type: 'currency',
                        minWidth: 100,
                    },
                    {
                        title: "收入",
                        key: "income",
                        type: 'currency',
                        minWidth: 100,
                    },
                    {
                        title: "税金",
                        key: "tax",
                        type: 'currency',
                        minWidth: 100,
                    },
                    {
                        title: "税率",
                        key: "rate",
                        type: 'double',
                        minWidth: 80,
                    },
                ],
                dataList:[]
            }
        },
        methods:{
            init(){
                this.loading=true;
                listRepayPlans({applyNo:this.applyNo}).then(res=>{
                    if(res.code == "0000"){
                        this.dataList = res.data;
                    }
                }).finally(()=>{
                    this.loading = false;
                })
            },
            cancel() {
                this.dataList = [];
                this.$emit('input', false);
                this.$emit('cancel');
            }
        },
        computed:{
            queryFlag(){
                if (this.value && this.applyNo) {
                    this.init();
                }
                return this.value;
            }
        }
    }
</script>

<style scoped>

</style>
